Custom Themes তৈরি এবং ব্যবহার

Flutter এ Custom Themes তৈরি এবং ব্যবহার করে আপনি অ্যাপ্লিকেশনের জন্য একটি ইউনিক এবং কনসিস্টেন্ট লুক ও ফিল তৈরি করতে পারেন। Custom Themes আপনাকে আপনার অ্যাপের বিভিন্ন UI উপাদানের রঙ, ফন্ট, এবং স্টাইল কাস্টমাইজ করার সুযোগ দেয় এবং এটি একটি সেন্ট্রাল জায়গা থেকে নিয়ন্ত্রণ করা যায়।

Custom Theme তৈরি করার ধাপসমূহ:

Flutter এ Custom Theme তৈরি করার জন্য, ThemeData ব্যবহার করে আপনার অ্যাপের জন্য নির্দিষ্ট রঙ, ফন্ট, এবং অন্যান্য স্টাইল কনফিগার করতে হবে। নিচে Custom Theme তৈরি এবং ব্যবহারের ধাপগুলো দেয়া হলো।

১. ThemeData ডিফাইন করা:

আপনার অ্যাপের জন্য ThemeData ডিফাইন করে বিভিন্ন প্রপার্টি সেট করতে হবে, যেমন প্রাথমিক রঙ, ফন্ট, বাটনের থিম, ইত্যাদি।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Theme Example',
      theme: ThemeData(
        primaryColor: Colors.teal,
        accentColor: Colors.orange,
        backgroundColor: Colors.white,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 18, color: Colors.black),
          headline1: TextStyle(
            fontSize: 36,
            fontWeight: FontWeight.bold,
            color: Colors.teal,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.teal,
            onPrimary: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Theme Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This text is styled using the custom theme!',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Styled Button'),
            ),
          ],
        ),
      ),
    );
  }
}

উপরে দেয়া কোডের ব্যাখ্যা:

• primaryColor এবং accentColor: অ্যাপের প্রাথমিক এবং এক্সেন্ট রঙ নির্ধারণ করা হয়েছে। এগুলো বিভিন্ন UI উপাদানে প্রয়োগ হবে, যেমন অ্যাপবার, বাটন ইত্যাদি।
• textTheme: অ্যাপ্লিকেশনের টেক্সট স্টাইল কাস্টমাইজ করার জন্য ব্যবহার করা হয়েছে। এখানে bodyText1 এবং headline1 টেক্সটের ফন্ট সাইজ, রঙ এবং ওজন নির্ধারণ করা হয়েছে।
• elevatedButtonTheme: বাটনের জন্য স্টাইল কাস্টমাইজ করা হয়েছে, যাতে বাটনগুলোর ব্যাকগ্রাউন্ড রঙ, টেক্সটের রঙ এবং বর্ডার রেডিয়াস নির্ধারণ করা যায়।

২. Custom Theme ব্যবহার করা:

Flutter এ Theme.of(context) ব্যবহার করে অ্যাপের বিভিন্ন জায়গায় Custom Theme এর প্রপার্টিগুলো অ্যাক্সেস করতে পারবেন।

Text(
  'Hello, World!',
  style: Theme.of(context).textTheme.headline1,
),

• উপরের উদাহরণে, Theme.of(context).textTheme.headline1 ব্যবহার করে অ্যাপের থিমে নির্ধারিত headline1 স্টাইল অ্যাক্সেস করা হয়েছে।

৩. Custom Dark Theme তৈরি করা:

Flutter এ আপনি Custom Light এবং Dark Theme উভয়ই তৈরি করতে পারেন। এতে ব্যবহারকারীরা তাদের ডিভাইসের থিম অনুযায়ী অ্যাপের লুক ও ফিল পরিবর্তন করতে পারে।

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.teal,
    accentColor: Colors.orange,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.teal,
    accentColor: Colors.orange,
  ),
  themeMode: ThemeMode.system, // ডিভাইসের সিস্টেম থিম অনুযায়ী পরিবর্তিত হবে
  home: MyHomePage(),
);

• theme: লাইট থিমের জন্য ThemeData নির্ধারণ করা হয়েছে।
• darkTheme: ডার্ক থিমের জন্য ThemeData নির্ধারণ করা হয়েছে।
• themeMode: ডিভাইসের সিস্টেম থিম অনুযায়ী অ্যাপের থিম পরিবর্তিত হবে।

৪. Custom Color Scheme ব্যবহার:

Flutter এ colorScheme ব্যবহার করে আপনি আরো বিস্তারিতভাবে রঙের সেট কনফিগার করতে পারেন।

ThemeData(
  colorScheme: ColorScheme(
    primary: Colors.teal,
    primaryVariant: Colors.teal[700]!,
    secondary: Colors.orange,
    secondaryVariant: Colors.orange[700]!,
    surface: Colors.white,
    background: Colors.grey[200]!,
    error: Colors.red,
    onPrimary: Colors.white,
    onSecondary: Colors.black,
    onSurface: Colors.black,
    onBackground: Colors.black,
    onError: Colors.white,
    brightness: Brightness.light,
  ),
);

• colorScheme এর মাধ্যমে আপনি প্রাথমিক রঙ, সেকেন্ডারি রঙ, ব্যাকগ্রাউন্ড রঙ, এবং অন্যান্য বিভিন্ন রঙের জন্য কনফিগারেশন করতে পারবেন।

৫. Custom ThemeExtension ব্যবহার:

Flutter 2.10 থেকে ThemeExtension এর মাধ্যমে কাস্টম থিম আইটেম যোগ করার সুবিধা রয়েছে।

class MyThemeExtension extends ThemeExtension<MyThemeExtension> {
  final Color customColor;

  MyThemeExtension({required this.customColor});

  @override
  MyThemeExtension copyWith({Color? customColor}) {
    return MyThemeExtension(
      customColor: customColor ?? this.customColor,
    );
  }

  @override
  MyThemeExtension lerp(ThemeExtension<MyThemeExtension>? other, double t) {
    if (other is! MyThemeExtension) return this;
    return MyThemeExtension(
      customColor: Color.lerp(customColor, other.customColor, t)!,
    );
  }
}

• MyThemeExtension দিয়ে আপনি আপনার অ্যাপের জন্য কাস্টম থিম প্রপার্টি তৈরি করতে পারবেন, যেমন একটি নির্দিষ্ট কাস্টম রঙ।

Custom Theme ব্যবহারের সুবিধা:

• Consistency: একবার থিম কনফিগার করলে, তা অ্যাপের সব জায়গায় প্রযোজ্য হয়, ফলে সামঞ্জস্য বজায় থাকে।
• Reusability: কাস্টম থিম একবার ডিফাইন করে অ্যাপের যেকোনো জায়গায় সহজেই ব্যবহার করা যায়।
• Maintainability: অ্যাপের থিম একটি কেন্দ্রীয় জায়গা থেকে নিয়ন্ত্রণ করা যায়, ফলে পরিবর্তন করা সহজ হয়।

Custom Themes ব্যবহার করে Flutter এ একটি ইউনিক এবং সামঞ্জস্যপূর্ণ UI তৈরি করা যায়, যা অ্যাপ্লিকেশনকে আরো পেশাদার এবং ব্যবহারকারী-বান্ধব করে তোলে।